import React, { useState, lazy, Suspense } from "react";

// 这个import是import命令，永远是同步引入的
// import Child from "./Child";

// es6还新增了import的函数，import函数可以做异步引入
const Child = lazy(() => import("./Child"));

const Loading = () => <div>loading...</div>;

const App = () => {
  const [show, setShow] = useState(false);

  return (
    <>
      <h2>组件懒加载</h2>
      <button onClick={() => setShow(true)}>btn</button>
      <Suspense fallback={<Loading />}>{show && <Child />}</Suspense>
    </>
  );
};

export default App;
